<template>
  <div id="cardSet" class="card-set">
    <swipeout v-if="isCardBind">
      <swipeout-item transition-mode="follow">
        <div slot="right-menu">
          <swipeout-button @click.native="unbindBankCard" type="warn">解绑</swipeout-button>
        </div>
        <div slot="content" class="swipe-content vux-1px-b">
          <img class="bank-logo" :src="bankLogo"/>
          <p class="bank-name">{{ this.bankName }}&nbsp;<span class="bank-type">{{ this.cardType }}</span></p>
          <p class="bank-number">{{ this.cardNumber }}&nbsp;<x-button mini @click.native="bindBankCard">更换</x-button></p>
        </div>
      </swipeout-item>
    </swipeout>
    <div v-else>
      <!--<cell title="绑定银行卡" @click.native="bindBankCard"></cell>-->
      <p class="message">您还没有添加银行卡哦~</p>
      <div class="btn-wrapper"><x-button mini type="primary" @click.native="bindBankCard">添加</x-button></div>
    </div>
  </div>
</template>

<script>
  import { Cell, Swipeout, SwipeoutItem, SwipeoutButton } from 'vux'
  export default {
    name: 'cardSet',
    components: {
      Cell,
      Swipeout,
      SwipeoutItem,
      SwipeoutButton
    },
    data () {
      return {
        isCardBind: false,
        bankName: '', // 银行名称
        bankLogo: '', // 银行 LOGO
        bankToken: '', // 银行卡号
        cardNumber: '', // 加密银行卡号
        cardType: '' // 银行卡类型（储蓄卡；信用卡）
      }
    },
    created () {
      this.$axiosPosting(this.$api.queryBankAccount).then(json => {
        if (json.code === '0000' &&
          json.data.bankName &&
          json.data.accNo &&
          json.data.cardTypeValue) {
          this.isCardBind = true
          this.bankName = json.data.bankName
          this.bankLogo = require('../../images/bank/' + json.data.imgUrl) || require('../../images/bank/BANK_default.png')
          this.bankToken = json.data.token
          this.cardNumber = json.data.accNo
          this.cardType = json.data.cardTypeValue
        }
      })
    },
    methods: {
      bindBankCard () {
        this.$router.push('/bindBankCard')
      },
      unbindBankCard () {
        this.$axiosPosting(this.$api.unBindCard, {token: this.bankToken}).then(json => {
          if (json.code === '0000') {
            this.$vux.toast.text('解绑成功！')
            this.isCardBind = false
          } else {
            this.$vux.toast.text(json.msg)
          }
        })
      }
    }
  }
</script>
<style lang="less">
  .card-set {
    .weui-cells {
      margin-top: 0;
    }
    .weui-cell {
      padding: .6rem .75rem;
    }
    .swipe-content {
      position: relative;
      height: 2.75rem;
      padding: .75rem .75rem 1rem;
      .bank-logo {
        position: absolute;
        top: .75rem;
        left: .75rem;
        width: 2.75rem;
        height: 2.75rem;
      }
      p {
        padding-left: 3.5rem;
        font-size: .75rem;
      }
      .bank-name {
        line-height: 2;
        .bank-type {
          float: right;
          width: 3rem;
          font-size: .5rem;
          line-height: 3;
          color: #666;
          text-align: center;
        }
      }
      .bank-number {
        color: #666;
        .weui-btn_mini {
          float: right;
          width: 3rem;
          padding: .25rem 0;
          font-size: .6rem;
          line-height: 1;
          background: #fff;
          border: 1px solid rgba(5, 0, 1, .2);
        }
      }
    }
    .message {
      margin-top: 60%;
      font-size: .75rem;
      color: #333;
      text-align: center;
    }
    .btn-wrapper {
      text-align: center;
      margin-top: 1.25rem;
      font-size: 0;
      .weui-btn_mini {
        width: 4.4rem;
      }
    }
  }
</style>
